<!-- Page header -->
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">
                    发新贴
                </h2>
            </div>
        </div>
    </div>
</div>
<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="card">
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label"><strong>版块</strong></label>
                    <select id="article_post_borad" type="text" class="form-select" placeholder="Select a date"
                            id="select-tags"
                            value="">
                        <option value="1">JAVA</option>
                        <option value="2">C++</option>
                        <option value="3">前端技术</option>
                        <option value="4">MySQL</option>
                        <option value="5">面试宝典</option>
                        <option value="6">经验分享</option>
                        <option value="7">招聘信息</option>
                        <option value="8">福利待遇</option>
                        <option value="9">灌水区</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label"><strong>标题</strong></label>
                    <input id="article_post_title" type="text" class="form-control" placeholder="请输入标题">
                </div>
                <div class="mb-3" style="height: 680px;">
                    <label class="form-label"><strong>内容</strong></label>
                    <div id="edit-article">
                        <!-- textarea也是一个表单控件，当在editor.md中编辑好的内容会关联这个文本域上 -->
                        <textarea id="article_post_content" style="display: none;"></textarea>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-transparent mt-auto">
                <div class="btn-list justify-content-end">
                    <a id="article_post_submit" href="javascript:void(0);" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                             stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M5 12l5 5l10 -10"></path>
                        </svg>
                        发 布
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 初始化编辑器 -->
<script type="text/javascript">
    $(function () {
        var editor = editormd("edit-article", {
            width: "100%",
            height: "100%",
            // theme : "dark",
            // previewTheme : "dark",
            // editorTheme : "pastel-on-dark",
            codeFold: true,
            markdown: '', // 处理编辑区内容
            //syncScrolling : false,
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            searchReplace: true,
            watch: true,                    // 关闭实时预览
            htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
            // toolbar  : false,             //关闭工具栏
            // previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            emoji: true,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                     // 开启科学公式TeX语言支持，默认关闭
            // flowChart: true,               // 开启流程图支持，默认关闭
            // sequenceDiagram: true,         // 开启时序/序列图支持，默认关闭,
            placeholder: '开始创作...',     // 占位符
            path: "./dist/editor.md/lib/"
        });

        // ================== 处理发贴按钮事件 =======================
        $('#article_post_submit').click(function () {
            let boardIdEl = $('#article_post_borad');
            let titleEl = $('#article_post_title');
            let contentEl = $('#article_post_content');
            // 非空校验
            if (!titleEl.val()) {
                titleEl.focus();
                // 提示
                $.toast({
                    heading: '提示',
                    text: '请输入帖子标题',
                    icon: 'warning'
                });
                return;
            }
            if (!contentEl.val()) {
                // 提示
                $.toast({
                    heading: '提示',
                    text: '请输入帖子内容',
                    icon: 'warning'
                });
                return;
            }

            // 构造帖子对象
            var postData = {
                title: titleEl.val(),
                content: contentEl.val(),
                boardId: boardIdEl.val(),
            }


            // 提交, 成功后调用changeNavActive($('#nav_board_index'));回到首页并加载帖子列表
            // contentType: 'application/x-www-form-urlencoded'
            $.ajax({
                type: "post",
                url: "/article/create",
                data: postData,
                contentType: 'application/x-www-form-urlencoded',
                success: function (respData) {
                    if (respData.code == 0) {
                        // 提示
                        $.toast({
                            heading: '成功',
                            text: respData.message,
                            icon: 'success'
                        });
                        // 成功后跳转到首页
                        changeNavActive($('#nav_board_index'));
                    } else {
                        // 失败(服务器处理业务逻辑失败), 提示用户错误信息
                        $.toast({
                            heading: '警告',
                            text: respData.message,
                            icon: 'warning'
                        });
                    }

                },
                error: function () {
                    $.toast({
                        heading: '错误',
                        text: '访问出现问题，请联系管理员',
                        icon: 'error'
                    });
                }

            });
        });
    });
</script>


</body>

</html>